<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 新语法</title>
</head>

<body>



    <script>
        //1.定义对象
        //es5
        function people(username, age) {
            return { username: username, age: age }
        }
        let p1 = new people("lixi", 12)
        console.log(p1.username)
        console.log(p1.age)

        //es6
        function people2(username, age) {
            //如果key的名字和变量参数名一致，则可以简化写
            return { username, age }
        }
        let p2 = new people("lixi-2", 12 - 2)
        console.log(p2.username)
        console.log(p2.age)

        //2.解构
        const people3 = { username: 'Rose', age: 18 };

        //es5
        //好处，直观；缺点：如果你要取多个值,代码多了一些
        /* let username=people3.username;
         let age = people3.age;
         console.log(username + ' --- ' + age);*/

        //es6
        const { username } = people3
        const { age } = people3
        console.log(`${username} + ${age}`)

        //数组
        const colors = [['red1', 'black'], ['red2', 'black'], ['red3', 'black']]
        for (let color of colors) {
            let [first, second] = color
            console.log(first + " " + second)
        }

        //3.延展操作符
        //对原来的js对象和数组进行数据的扩展
        //例如对上述people3扩展
        //es5 需要重新定义
        //es6
        const people4 = { ...people3, address: '北京' }
        console.log(people3)    //age:18  username:"Rose"
        console.log(people4)    //age:18 username:"Rose" address: "北京"

        // 4.import和export ????
        // 模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
        // 在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）, 然后以import的形式将这个变量进行引入
        // import导入模块、export导出模块

    </script>
    <!-- 对于在html文件中使用标签引入具有导入导出的js代码，要求必须书写type="module"属性，表示模块化，因为在js中导入导出只能使用在模块化中 -->
    <scirpt type="module" src="./demo02Module.js"></scirpt>
</body>

</html>